﻿@{
    Layout = "_Layout_UI";
}
@section scripts{
    <script type="text/javascript">
        var PicNo = '@ViewBag.PicGroup_No';
        var previewLength;
        var imgTempList;
        var bootstrap = function ($, ibpm) {
            "use strict";
            var page = {
                init: function () {
                    if (PicNo == '') {
                        alert('图片组编号丢失');
                        return;
                    }
                    imgTempList = [@Html.Raw(ViewBag.Picture)];
                    //开启文件选择
                    $('#uploadBtn').on('click', function () {
                        $('#upload').click();
                    });
                    //上传
                    $('#upload').on('change', function () {
                        var arr = $('#upload').val().split('\\');
                        if (arr.length > 0) {
                            var formData = new FormData($("#uploadForm")[0]);
                            $.ajax({
                                type: "POST",
                                data: formData,
                                dataType: "json",   //用json，就不用eval了
                                url: top.$.rootUrl + "/api/FilePic/?GroupNo=" + PicNo,
                                contentType: false,
                                processData: false,
                                success: function (data) {
                                    if (data.code == "200") {
                                        location = location.href;
                                    }
                                    else {
                                        alert(JSON.stringify(data.info));
                                    }
                                },
                                beforeSend: function (request) {
                                    request.setRequestHeader("Authorization", "Bearer " + $.AToken);
                                },
                                error: function (data) {
                                    $('#upload').val('');
                                    alert(JSON.stringify(data));
                                }
                            });
                        }
                    });
                    page.bind();
                },
                bind: function () {
                    //图片分页展示
                    $('.img-list-slider').slick({
                        dots: true,
                        slidesToShow: 5,
                        slidesToScroll: 5
                    });
                    initEle();
                    //预览图片
                    $('.img-list-slider').on('click', '.thumbnail-self .image', function (e) {
                        imgEnlarge(e)
                    });
                    //图片删除
                    $('.img-list-slider').on('click', '.thumbnail-self .remove', function (e) {
                        imgRemove(e);
                    });
                    //预览图片时删除
                    $('.modal-show-image ').on('click', '.img-modal #img_remove_modal', function () {
                        imgRemoveModal();
                    })
                },
            };
            page.init();
        }
        //dom初始化
        function initEle() {
            for (var i in imgTempList) {
                var str = "", imgTempListValue = imgTempList[i];
                str = '<div class="thumbnail-self">' +
                    '<img class="image" alt="' + imgTempListValue + '"  src="' + imgTempListValue + '" />' +
                    '<p class="remove" data-filename="' + imgTempListValue + '" >' + 'X' + '</p>' +
                    '</div>';

                $('.img-list-slider').slickAdd(str);
            }
        }
        //禁止自动轮播
        function carousel() {
            //禁止自动轮播
            $('.carousel').carousel({
                interval: false
            });
        }
        //图片预览放大
        function imgEnlarge(e) {
            carousel();
            //获取图片长度
            previewLength = $('.img-list-slider .thumbnail-self:not(.slick-cloned)').length;

            var sourceSrc = "", str = "", sourceSrcArr = [];
            //获取url数组
            $(".img-list-slider .thumbnail-self:not(.slick-cloned) img").each(function () {
                var attrSrc = $(this).attr("src");
                sourceSrcArr.push(attrSrc);
            });
            //获取当前点击的元素url
            sourceSrc = $(e.target).attr('src');

            //当前url在数组中位置
            var index = sourceSrcArr.indexOf(sourceSrc);
            if (index > -1) {
                for (var i in sourceSrcArr) {
                    if (i == index) {
                        str = '<div class="item active">' +
                            '<img src="' + sourceSrcArr[i] + '" class="img-self">' +
                            '</div>';
                    } else {
                        str = '<div class="item">' +
                            '<img src="' + sourceSrcArr[i] + '" class="img-self">' +
                            '</div>';
                    }
                    $(".carousel-inner-stand").append(str);
                }
            }
            $("#show_image").modal('show');
            //弹窗关闭清空数组
            var self = this;
            $('#show_image').on('hide.bs.modal', function () {
                $(".carousel-inner-stand").empty();
            });
        }

        //缩略图右上方按钮删除
        function imgRemove(e) {
            var imgIndex = imgTempList.indexOf(e.target.dataset.filename);
            imgTempList.splice(imgIndex, 1);
            $('.img-list-slider').slickRemove(imgIndex);
            //console.log(imgTempList);
            GoDel(e.target.dataset.filename);
        }

        //预览图片时删除
        function imgRemoveModal() {
            if ($('.carousel-inner-stand .item').hasClass('active')) {
                var nextElement = $('.active').next();
                if (nextElement.length != 0) {
                    nextElement.addClass('active');
                    var activeFirst = $('.carousel-inner-stand .active:first');
                    var activeFirstImg = activeFirst.find('img').attr('src');
                    modalRemove(activeFirstImg, activeFirst);

                } else {
                    $('.carousel-inner-stand .item:first').addClass('active');
                    var activeLast = $('.carousel-inner-stand .active:last');
                    var activeLastImg = activeLast.find('img').attr('src');
                    modalRemove(activeLastImg, activeLast);
                }
            }
        }

        //预览图片删除动作
        function modalRemove(imgSrc, activeElement) {
            previewLength--;
            var imgIndex = imgTempList.indexOf(imgSrc);
            if (previewLength > 0) {
                $('.img-list-slider').slickRemove(imgIndex);
            } else {
                $("#show_image").modal('hide');
                $('.img-list-slider').slickRemove(imgIndex);
            }
            imgTempList.splice(imgIndex, 1);
            activeElement.remove();
            //console.log(imgTempList);
            GoDel(imgSrc);
        }
        function GoDel(PicUrl) {
            $.ajax({
                type: 'POST',
                url: "/Annexes/PicDelet",
                data: { Arr: PicUrl },
                dataType: "json",   //用json，就不用eval了
                success: function (r) {
                    if (r.resultCode == "1") {
                        //location = location.href;
                        console.log(r.resultMsg);
                    }
                    else {
                        alert(r.resultMsg);
                    }
                },
            })
        }
        function GoBack() {
            if (window.name != '') {
                if (parent.layer && parent.layer.getFrameIndex(window.name)) {
                    var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                    parent.layer.close(index); //再执行关闭
                    return;
                }
                else {
                    history.go(-1);
                }
            }
            else {
                history.go(-1);
            }
        }
    </script>
}

<!--预览图片(弹框)  Modal-->
<div id="show_image" class="modal  modal-show-image" aria-hidden=”true” data-backdrop=”static”>
    <div class="modal-header">
        <button data-dismiss="modal" class="close close-pop" type="button"> X </button>
    </div>
    <div class="modal-body">
        <div id="myCarousel" class="carousel">
            <!--轮播（Carousel）项目-->
            <div class="carousel-inner carousel-inner-stand"></div>

            <!--轮播（Carousel）导航-->
            <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
                <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
                <span class="sr-only">Previous</span>
            </a>
            <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
                <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
                <span class="sr-only">Next</span>
            </a>
        </div>
    </div>
    <div class="modal-footer img-modal">
        <button type="button" class="btn btn-default close close-pop" data-dismiss="modal"> 取 消 </button>
        <button type="button" class="btn btn-primary" id="img_remove_modal"> 删 除 </button>
    </div>
</div>

<section id="features" class="left-bottom blue thumbnail-show">
    <div class="content">
        <div class="slider add-remove img-list-slider"></div>
    </div>
</section>

<div class="modal-header">
    <div class="btn-group btn-group-sm" style="float:right;">
        <button type="button" id="uploadBtn" class="btn btn-primary btn-xs">&nbsp;上传图片</button>
        <a href="javascript:GoBack();" class="btn btn-default">&nbsp;返回</a>
    </div>
    <form id="uploadForm" method="post" enctype="multipart/form-data" role="form">
        <input id="upload" name="upload" accept="image/gif, image/png, image/jpeg" type="file" style="display:none" />
    </form>
</div>
